<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="./child-element.html">

<dom-module id="downward-flow">
  <template>
    <style>
      :host{
        display: block;
      }
      div{
        border:1px solid red;
        width:250px;
        padding:10px;
      }
    </style>
    <div>父元素
        <child-element name="{{name}}"></child-element>
        <button on-click="changeName">修改name的值</button>
    </div>
  </template>

  <script>
    /**
     * @DownWardFlow
     * @polymer
     */
    class DownWardFlow extends Polymer.Element {
      static get is() { return 'downward-flow'; }
      static get properties(){
        return {
          name:{
            type: String,
            value:"parent default value",
            observer:"_nameChanged"
          }
        }
      }
      _nameChanged(newValue, oldValue){
          console.log("父元素：新值：",newValue,"旧值：",oldValue)
      }
      changeName(){
          this.name = "123";
      }
    }
    window.customElements.define(DownWardFlow.is, DownWardFlow);

  </script>
</dom-module>


